
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>用户管理</title>
    <link rel="stylesheet" type="text/css" href="/css/style.css" charset="utf-8" />

    <style type="text/css">
        /*字体的样式*/
        *, body {
            margin: 0px;
            font-family: '微软雅黑';
        }
        .button-container {
            float: right;
        }
        .right-align {
            position: absolute;
            right: 50px;
            bottom: -4px;
            transform: translateX(-50%);
        }
    </style>
    <script src="/js/jquery-1.10.2.min.js"></script>
    <script src="/js/generic.js"></script>
    <script src="/js/fypage.js"></script>
</head>

<body>
<!--<div th:replace="top::top"></div>-->

<table class="maintable" style=" width: 100%">
    <tr>
        <!--        <div th:replace="menu::menu"></div>-->
        <td class="rightmaintd" valign="top">
<!--            大标题-->
            <div style="height: 40px; text-align: center; background-color: #009966">
                <p style="font-weight: bold; padding-top: 10px; font-size: larger; color: white">用户管理</p>
            </div>
<!--新建用户和批量添加功能-->
            <div class="searchdiv">
                <input type="button" value="+新建用户" class="denglubtn01" onclick="create();">
                <input type="button" value="+批量添加" class="denglubtn01" onclick="window.location.href='/user/batchAdd'">
<!--                查询功能-->
                <div class="rightsearchdiv"><!-- name -->
                    <div class="rightsearchdivtext">
                        <input type="text" id="keyword" class="nobodertext" placeholder="查询用户">
                        <button class="searchbtn" onclick="search();">
                            <img src="/images/fdj.png" alt="" class="searchfdj">
                        </button>
                    </div>
                </div>
<!--                用户表单主体-->
            </div>
            <table class="neirontbiao" id="user_list" style="width: 100%"></table>
            <!--表单显示条数，上下页及跳转-->
            <div class="button-container">
                <button id="prevButton">上一页</button>
                <button id="nextButton">下一页</button>
            </div>
            每页显示条数：
            <select id="pageSizeSelect" onchange="changePageSize();">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50" selected>50</option>
                <option value="100">100</option>
            </select>
            <div class="pagediv" id="pager">
                <label>第
                    <input type="text" id="page" style="width:30px"  onkeypress="pageSearch(event)">
                    页
                </label>
                <input type="button" value="跳转" onclick="pageOn()">
                <p id="sumPageId">place</p>
            </div>

        </td>
    </tr>
</table>
</body>
</html>

<!--<div th:replace="bottom::bottom"></div>-->

<script type="text/javascript">
    function start(){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/user/', true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                dataSource = JSON.parse(xhr.responseText);
                dataSource.forEach(function(obj) {
                    for (var key in obj) {
                        if (obj.hasOwnProperty(key) && obj[key] === null) {
                            obj[key] = ''; // 将属性值为 null 的属性替换为空字符串
                        }
                    }
                });
                data = JSON.parse(JSON.stringify(dataSource));
                console.log(data);
                renderData();
            }
        };
        xhr.send();
    }
    var searchValue=document.getElementById('keyword');
    var pageChage=document.getElementById('page');
    var sumPageShow=document.getElementById('sumPageId');
    var pageSize = 50; // 每页显示的数据量
    var currentPage = 1; // 当前页码
    var dataRender=[];  //每页显示的数据，是数据
    var pageSum=0;  //总共的页数
    var dataSource=[];   //一共有的json数据，源数据
    var data=[];  // 操作的数据，防止错误，可以由源数据赋值
    // 使用AJAX请求获取JSON数据
    start();
    // 渲染数据到网页上
    function renderData(){    //渲染页面函数
        pageSum=Math.ceil(data.length/(pageSize));
        dataRender=data.slice((currentPage-1)*pageSize,pageSize*currentPage);
        var container = document.getElementById('user_list');
        var html = '<tr class="neirontbiaotou"><td width="10%">用户名</td><td width="10%">姓名</td><td width="15%">类型</td><td width="15%">电话</td><td width="15%">团队</td><td width="19%">院系单位</td></tr>';
        if (dataRender.length == 0) {
            html += '<tr><td colspan="7" style="text-align: center; height: 50px;">暂无用户</td></tr>';
        }
        for (var i = 0; i < dataRender.length; i++) {
            var item = dataRender[i];
            html += '<tr>';
            html += '<td>' + item.userid + '</td>';
            html += '<td>' + item.username + '</td>';
            html += '<td>' + item.type + '</td>';
            html += '<td>' + item.tel + '</td>';
            html += '<td>' + item.teamName + '</td>';
            html += '<td>' + item.company + '</td>';
            html += '<td>' + '<a href="javascript:update(\'' + item.userid + '\')">编辑</a>&nbsp;<a style=";color:#0c531f" href="javascript:deleteD(\'' + item.userid + '\')">删除</a>' + '</td></tr>';
        }
        pageChage.value=currentPage;
        sumPageShow.textContent="共 "+pageSum+" 页";
        container.innerHTML = html;
    }
    function nextOrPreOnClick(){
        //上一页
        var prevButton = document.getElementById('prevButton');
        prevButton.addEventListener('click', function() {
            currentPage--;
            if(currentPage==0)
                currentPage=pageSum;
            renderData();

        });

        // 下一页按钮点击事件处理函数
        var nextButton = document.getElementById('nextButton');
        nextButton.addEventListener('click', function() {
            currentPage=(++currentPage)%pageSum;
            currentPage=currentPage==0?1:currentPage;
            renderData();
        });
    }
    function changePageSize(){
        var pageSizeSelect = document.getElementById('pageSizeSelect');
        pageSize = parseInt(pageSizeSelect.value);
        currentPage=1;
        renderData();
    }
    nextOrPreOnClick();
    function search() {
        currentPage = 1;
        data = [];
        var inputVal = searchValue.value.toUpperCase();
        if (inputVal == "") {
            data = JSON.parse(JSON.stringify(dataSource));
        }
        else {
            for (var i = 0; i < dataSource.length; i++) {
                if (dataSource[i].userid.toUpperCase().includes(inputVal)) {
                    data.push(dataSource[i]);
                }
            }
        }
        renderData();
    }
    function enterKeyPress(event) {
        // 检查按下的按键是否为回车键，回车键的keyCode是13
        if (event.keyCode === 13) {
            search();
        }
    }
    function create(){
        window.location.href="/user/create";
    }
    function update(userid){
        window.location.href = "/user/edit/" + userid;
    }
    function deleteD(userid){
        var result=confirm("确认删除当前内容吗？");
        if(result){
            // 发送 DELETE 请求
            fetch('/user/'+userid, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json' // 可根据实际情况设置请求头
                },
            })
                .then(response => {
                    if (response.ok) {
                        alert("删除成功！");
                        start();
                        renderData();
                    } else {
                        alert("发生错误，删除失败！");
                    }
                })
                .catch(error => {
                    // 捕获网络错误等异常
                    alert("网络错误，删除失败！");
                });

        }
    }
    function pageSearch(event) {
        // 检查按下的按键是否为回车键，回车键的keyCode是13
        if (event.keyCode === 13) {
            pageOn();
        }
    }
    function pageOn(){
        var afterPage=pageChage.value;
        if(afterPage<1||afterPage>pageSum){
            alert("输入的页码错误！");
            return;
        }
        currentPage=afterPage;
        renderData();
    }
</script>


